<template>
	<view>
		<view class="xbgf">
			<view class="top xflex-x-between">
				<view class="top-item" @click="onsettop('calendar')" :class="info.category == 'calendar'?'active':''">
					日历房
				</view>
				<view class="top-item" @click="onsettop('discount')" :class="info.category == 'discount'?'active':''">
					特价房
				</view>
			</view>


			<view class="fj xflex-x-between">
				<view class="">
					<view class="xflex-x">
						<view class="fj-span">

						</view>
						<view class="fj-title">
							房间 {{type.num}}
						</view>
					</view>
				</view>
				<!-- <view class="fj-rili xflex-x-center">
					<image class="fj-rili-icon" src="/pagesA/static/images/rili1.png" mode=""></image>
					<view class="fj-rili-text">
						2024-03-08
					</view>
				</view> -->
			</view>


			<view class="xx xflex-x">
				<view class="xx-item xmr10" :class="info.type_id == item.id?'xx-active':''" @click="onroom(item)" v-for="(item,index) in type.list"
					:key="index">
					{{item.name}}
				</view>
			</view>
		</view>


		<view class="room xmt32" v-for="(item,index) in type.lists" :key="index">
			<view class="room-box xflex-x">
				<image class="room-img" :src="item.image" mode=""></image>
				<view class="room-info xflex-y-between">
					<view class="">
						<view class="room-info-title">
							{{item.name}}
						</view>
						<view class="room-info-num">
							库存：{{item.stock}}间
						</view>
					</view>
					<view class="room-info-price">
						<text>￥</text>{{item.price}} <text>/晚</text>
					</view>
				</view>
			</view>

			<view class="xflex-x-between xpt32">
				<view class="btn1" @click="getsetStatus(item)">
					{{item.status == 1?'下架':'上架'}}房型
				</view>
				<!-- <view class="btn2" @click="topage('/pagesA/page/condition/condition?id='+item.id)">
					设置
				</view> -->
				<view class="btn3" @click="onset(item)">
					调整库存
				</view>
			</view>
		</view>
	</view>

	<u-popup :show="type.show">
		<view class="popup pr">
			<view class="popup-top">
				<view class="popup-top-title">
					调整库存
				</view>
				<view class="popup-top-tips">
					注意：调整的是当日的库存情况，明天会自动刷新为初始
					房间库存数量！
				</view>
			</view>

			<view class=" xbgf xmt20 popup-room">
				<view class="xflex-x xp24">
					<image class="popup-room-img xmr24" :src="type.info.image" mode=""></image>
					<view class="popup-room-box xflex1 xflex-y-between xai">
						<view class="popup-room-title">
							{{type.info.name}}
						</view>
						<view class="xflex-x-between">
							<view class="popup-room-money">
								￥{{type.info.price}}
							</view>
							<view class="xflex-x">
								<view class="popup-room-kc">
									当前库存
								</view>
								<view class="number xflex-x">
									<image class="number-icon" @click="onstock('jian')"
										src="/pagesA/static/images/jian.png" mode=""></image>
									<view class="number-num">
										{{type.pNum}}
									</view>
									<image class="number-icon" @click="onstock('jia')"
										src="/pagesA/static/images/jia.png" mode="">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="xflex-x-between popup-bom">
					<view class="popup-bom-num">
						{{(type.stock-type.pNum)>0?'减少':'增加'}} 房间数量: <text>{{Math.abs(type.stock - type.pNum)}}</text>
					</view>
					<view class="popup-bom-btn" @click="getsetStock()">
						确认
					</view>
				</view>
			</view>

			<image class="popup-gb pa" @click="type.show = false" src="/pagesA/static/images/guanbi1.png" mode="">
			</image>
		</view>
	</u-popup>
</template>

<script setup>
	import {onShow} from '@dcloudio/uni-app'
	import {
		reactive
	} from 'vue';
	import {
		partnertype,
		houselists,
		setStatus,
		setStock
	} from '../../../network/home.js'
	let type = reactive({
		list: [],
		num: 0,
		lists: [],
		show: false,
		pNum: 0,
		pid: '',
		stock: 0,
		info:{
			hotel_id: 7,
			id: 7,
			image: "",
			name: "",
			price: "",
			sales: 0,
			status: "1",
			stock: 1,
		}
	})
	let info = reactive({
		category: 'calendar',
		type_id: ''
	})

	const onset = (data) => {
		
		let url = '/pagesA/page/modifyStock/modifyStock?id='+data.id + '&type=' + (info.category=='calendar'?1:2)
		console.log(url);
		uni.navigateTo({
			url:url
		})
		// type.stock = data.stock
		// type.pNum = data.stock
		// type.pid = data.id
		// type.show = true
		// type.info = data

		// console.log(data, type);
	}

	const onstock = (types) => {
		console.log(type);
		if (types == 'jia') {
			console.log(type.pNum);
			type.pNum = type.pNum + 1
		} else {
			if (type.pNum < 1) return
			type.pNum = type.pNum - 1
		}
	}
	
	const topage =(url) =>{
		uni.navigateTo({
			url:url
		})
	}
	
	
	const onroom = (data) =>{
		info.type_id = data.id
		gethouselists()
	}
	
	
	const getsetStock = () =>{
		setStock({
			id:type.pid,
			stock:type.pNum
		}).then(res=>{
			type.show = false
			uni.showToast({
				icon:"none",
				title:'设置成功'
			})
			getpartnertype()
		})
	}
	
	const onsettop = (data) =>{
		info.category = data
		getpartnertype()
	}

	// 获取列表
	const getpartnertype = () => {
		partnertype({
			category: info.category
		}).then(res => {
			
			console.log(res);
			type.lists = []
			type.list = res.data.lists
			type.num = res.data.total
			
			info.type_id = res.data.lists[0].id
			
			gethouselists()
		})
	}

	const getsetStatus = (data) => {
		setStatus({
			id: data.id
		}).then(res => {
			gethouselists()
		})
	}

	// 获取列表
	const gethouselists = () => {
		houselists(info).then(res => {
			console.log(res);
			
			type.lists = res.data.lists
		})
	}
	onShow(()=>{
		getpartnertype()
	})
	
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.top {
		width: 460rpx;
		height: 80rpx;
		background: #EEEEEE;
		padding: 27rpx auto 37rpx;
		margin: auto;
		border-radius: 30rpx;

		&-item {
			width: 220rpx;
			height: 60rpx;
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
		}

		.active {
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			color: #fff;
		}
	}

	.fj {
		padding: 40rpx;

		&-span {
			width: 8rpx;
			height: 34rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			margin-right: 12rpx;
		}

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
		}

		&-rili {
			width: 250rpx;
			height: 50rpx;
			background: #F5F6FA;
			border-radius: 5rpx;

			&-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
			}

			&-text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
			}
		}
	}

	.xx {
		padding: 21rpx 40rpx;

		&-item {
			// width: 162rpx;
			height: 50rpx;
			background: #F5F6FA;
			border-radius: 10rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
			text-align: center;
			line-height: 50rpx;
			padding: 0 20rpx;
		}

		&-active {
			background: #0FB5FC !important;
			color: #fff !important;
		}
	}

	.room {

		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;

		&-img {
			width: 240rpx;
			height: 240rpx;
			background: #EEEEEE;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		&-info {
			height: 240rpx;



			&-title {}

			&-num {
				width: 132rpx;
				height: 34rpx;
				background: #FFFFFF;
				border-radius: 3rpx;
				border: 1px solid #666666;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #666666;
				line-height: 34rpx;
				text-align: center;
				margin-top: 22rpx;
			}

			&-price {
				font-family: PingFang SC;
				font-weight: bold;

				font-size: 40rpx;
				color: #CA1C1D;

				&>text {
					font-size: 28rpx;
				}
			}
		}


	}

	.btn1 {
		width: 174rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 1px solid #CCCCCC;
		text-align: center;
		line-height: 88rpx;
	}

	.btn2 {
		width: 174rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 1px solid #CCCCCC;
		text-align: center;
		line-height: 88rpx;
	}

	.btn3 {
		width: 264rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;

		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}

	.popup {
		width: 749rpx;
		height: 630rpx;
		background: #EEEEEE;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		&-gb {
			width: 32rpx;
			height: 32rpx;
			top: 30rpx;
			right: 34rpx;
		}

		&-top {
			height: 175rpx;
			background-color: #fff;
			padding: 40rpx 121rpx 0 28rpx;

			&-title {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #111111;
			}

			&-tips {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				margin-top: 20rpx;
			}
		}

		&-room {
			height: 100%;

			&-img {
				width: 150rpx;
				height: 150rpx;
				background: #F8F8F8;
				border-radius: 10rpx;
			}

			&-title {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
			}

			&-box {
				height: 150rpx;
			}

			&-money {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #ED2445;
				line-height: 48rpx;

				&>text {
					font-size: 26rpx;
				}
			}

			&-kc {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				margin-right: 14rpx;
			}


		}

		&-bom {
			margin-top: 105rpx;
			padding: 29rpx 27rpx;

			&-num {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #999999;

				&>text {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 60rpx;
					color: #F23031;
				}
			}

			&-btn {
				width: 236rpx;
				height: 72rpx;
				background: linear-gradient(90deg, #0DBFFB, #198EFF);
				border-radius: 36rpx 36rpx 36rpx 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
		}
	}

	.number {
		// margin-right: 45rpx;

		&-icon {
			width: 40rpx;
			height: 40rpx;
		}

		&-num {
			width: 90rpx;
			height: 40rpx;
			background: #F8F8F8;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			text-align: center;
			line-height: 40rpx;
		}
	}
</style>